<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="60%"
      top="20vh"
      @close="closeDialog"
    >
      <el-form
        :model="createForm"
        label-width="100px"
        label-suffix=":"
        class="searchw"
        ref="createForm"
      >
      <div class="page-panel-title" style="margin-top: 0">基本信息</div>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="退出申请人" prop="empName">
              <el-input
                v-model.trim="createForm.empName"
                placeholder="请输入退出申请人"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退出时间" prop="leaveDate">
              <el-input
                v-model.trim="createForm.leaveDate"
                placeholder="请输入退出时间"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="退出原因" prop="leaveReason">
              <el-input
                v-model.trim="createForm.leaveReason"
                placeholder="请输入退出原因"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="状态" prop="state">
              <el-select
                v-model="createForm.state"
                size="small"
                placeholder="请选择状态"
                filterable
                disabled
              >
                <el-option
                  v-for="item in stateList"
                  :key="item.code"
                  :value="item.code"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="page-panel-title" style="margin-top: 0">交接清单</div>
        <stor-apply-table :rowData="row" :stateList="stateList"></stor-apply-table>
        <div class="page-panel-title" style="margin-top: 0" v-if="title == '审核详情'">审核日志</div>
        <examine-log-table v-if="title == '审核详情'" :rowData="row" :stateList="stateList" ></examine-log-table>
        <div class="page-panel-title" style="margin-top: 0" v-if="title == '审核'">审核</div>
        <el-row :gutter="24" v-if="title == '审核'">
          <el-col :span="24">
            <el-form-item label="审核备注" prop="remark">
              <el-input
                v-model.trim="createForm.remark"
                placeholder="请输入审核备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">关 闭</el-button>
        <el-button
          type="primary"
          @click="confirmData()"
          v-if="title == '审核'"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import examineLogTable from '../components/examineLogTable.vue'
import StorApplyTable from '../components/storApplyTable.vue'
export default {
  components: { examineLogTable, StorApplyTable },
  name: 'addBrand',
  props: {
    row: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ''
    },
    stateList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      visible: true,
      createForm: {
        id: '',
        handoverContent: '',
        contentType: '',
      },
    }
  },
  created() {
    if(this.row.id){
      this.createForm = this.row
    }
  },
  mounted() {},
  methods: {
    closeDialog() {
      this.$emit('cancle')
    },
    confirmData() {
      this.$emit('ok', this.createForm.remark)
    },
  }
}
</script>
<style scoped lang="less">
.el-select {
  width: 100%!important;
  /deep/.el-input{
    width: 100%!important;
  }
}
/* 小标题 */
.title {
  display: flex;
  align-items: center;
  margin: 10px 0 15px 0px;
  .label {
    font-weight: bold;
    color: #606266;
    margin-right: 5px;
  }
  .line {
    flex: 1;
    height: 1px;
    background: #dee3ed;
  }
}
</style>
